<template>
  <div>
    <button @click="addCounter">{{ counter }}计数</button>
    <button @click="userStore.$reset()">重置</button>
    <button @click="login">登录</button>
    <p></p>
    <div>当前登录信息：</div>
    <p></p>
    {{ userStore.name }} | {{ userStore.phone }} | {{ userStore.token }} | {{ userStore.counter }}
    <br>
    <br>
    <br>
    <br>
    <router-link to="/">首页</router-link> |
    <router-link to="/detail">详情页</router-link>
  </div>
</template>

<script setup>
import { storeToRefs } from "pinia";

const userStore = useStore()

let { counter } = storeToRefs(userStore)

const addCounter = () => {
  counter.value ++
}

const login = () => {
  userStore.setUser({
    name: '张三',
    phone: '18122223333',
    token: Math.random() * 100,
    counter: 100
  })
}
</script>

<style scoped>

</style>